import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入需要权限进入的页面列表
import tokenRouterList from './token_router'
// 导入 js-cookie
import Cookie from 'js-cookie'

// 重写路由push方法
// 先进行备份
const originPush = VueRouter.prototype.push
// 重写
VueRouter.prototype.push = function(location, onResolve, onReject) {
  // 如果有传成功或者失败的回调函数
  if (onResolve || onReject) {
    // 使用传入的成功或失败的回调函数
    return originPush.call(this, location, onResolve, onReject)
  }
  // 如果没有传使用默认的
  return originPush.call(this, location).catch((err) => err)
}

// 重写路由replace方法
// 备份
const originReplace = VueRouter.prototype.replace
// 重写
VueRouter.prototype.replace = function(location, onResolve, onReject) {
  // 如果有传成功或者失败的回调函数
  if (onResolve || onReject) {
    return originReplace.call(this, location, onResolve, onReject)
  }
  // 如果没有传使用默认的
  return originReplace.call(this, location).catch((err) => err)
}

Vue.use(VueRouter)

const routes = [
  // {
  //   path: '/',
  //   name: 'home',
  //   component: HomeView
  // },
  // {
  //   path: '/about',
  //   name: 'about',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  // }
  // 初次加载页面，重定向到主页面
  {
    path: '/',
    redirect: '/home'
  },
  // 主页
  {
    path: '/home',
    name: 'home',
    redirect: '/home/dashboard',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
    children: [
      // 数据页面
      {
        path: 'dashboard',
        name: 'dashboard',
        component: () => import(/* webpackChunkName: "home" */ '@/views/home/Dashboard.vue')
      },
      // 写文章
      {
        path: 'write',
        name: 'write',
        meta: {
          keepAlive: true // 需要keepalive缓存的组件
        },
        component: () => import(/* webpackChunkName: "home" */ '@/views/home/Write.vue')
      },
      // 分类
      {
        path: 'cate',
        name: 'cate',
        component: () => import(/* webpackChunkName: "home" */ '@/views/home/Cate.vue')
      },
      // 标签
      {
        path: 'tag',
        name: 'tag',
        component: () => import(/* webpackChunkName: "home" */ '@/views/home/Tag.vue')
      },
      // 文章列表
      {
        path: 'articlelist',
        name: 'articlelist',
        component: () => import(/* webpackChunkName: "home" */ '@/views/home/ArticleList.vue')
      },
      // 基础设置
      {
        path: 'site',
        name: 'site',
        component: () => import(/*  webpackChunkName: "home" */ '@/views/home/Site.vue') // import() 在需要的时候，再加载某个模块
      },
      // 文章修改
      {
        path: 'edit',
        name: 'edit',
        component: () => import(/* webpackChunkName: "home" */ '@/views/home/Edit.vue')
      },
      // 配置
      {
        path: 'configuration',
        name: 'configuration',
        component: () => import(/* webpackChunkName: "home" */ '@/views/home/Configuration.vue')
      },
      // 关于我
      {
        path: 'aboutme',
        name: 'aboutme',
        component: () => import(/* webpackChunkName: "home" */ '@/views/home/Aboutme.vue'),
        meta: {
          keepAlive: true // 需要keepalive缓存的组件
        }
      },
      // 写动态
      {
        path: 'writedynamic',
        name: 'writedynamic',
        component: () => import(/* webpackChunkName: "home" */ '@/views/home/Writedynamic.vue'),
        meta: {
          keepAlive: true // 需要keepalive缓存的组件
        }
      },
      // 动态管理
      {
        path: 'dynamicmanagement',
        name: 'dynamicmanagement',
        component: () => import(/* webpackChunkName: "home" */'@/views/home/Dynamicmanagement.vue')
      },
      // 修改动态
      {
        path: 'updateDynamic/:id?',
        name: 'updateDynamic',
        component: () => import(/* webpackChunkName: "home" */ '@/views/home/EditDynamic.vue'),
        meta: {
          keepAlive: true // 需要keepalive缓存的组件
        }
      }
    ]
  },
  // 登录
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/Login.vue')
  }
]

const router = new VueRouter({
  routes
})

// 路由前置守卫，路由将要跳转页面的时候触发
router.beforeEach((to, from, next) => {
  // 对需要权限的页面进行限制
  if (tokenRouterList.indexOf(to.name) !== -1) {
    // 如果Cookie里面没有token那么跳转到登录页
    if (!Cookie.get('token')) {
      next('/login')
    }
  }
  // 对不需要权限的页面直接放行
  next() // 放行
})

// 路由后置守卫，路由跳转完的时候触发
router.afterEach((to, from, next) => {
  // 当路由跳转完毕时，页面返回到顶部
  window.scrollTo(0, 0)
})

export default router
